<template>
  <div>
    <el-container style="border: 1px solid rgb(230,230,230);margin-top: 30px;margin-bottom: 30px;"> 
	  <!-- 菜单栏 -->
	        <!-- <el-aside width="180px" style="background-color:white">
			  <div style="height:70px; text-align: center; line-height: 70px;" >
				<el-link href="" icon="el-icon-s-promotion" style="font-size:20px;">&nbsp;&nbsp;智慧停车</el-link>
			  </div>
			  
			  <el-menu>
				  
				<el-submenu index="1" @click.native="clickIndex(1)">
					<template slot="title" @click="aaa()">首页</template>
					
					<router-link to="/Park_Home" replace tag="div">停车</router-link> -->
					
					<!-- <el-menu-item-group>
					  <el-menu-item index="1-1" @click.native="clickIndex(1-1)">
						  <router-link to="/Convenience_payment_water" replace tag="div">停车</router-link>
					  </el-menu-item>
					  
					 <el-menu-item index="1-2">
						  <router-link to="/Convenience_payment_water" replace tag="div">充值</router-link>
					  </el-menu-item>
					
					<el-menu-item index="1-3">
						  <router-link to="/Convenience_payment_water" replace tag="div">缴费</router-link>
					  </el-menu-item>
					  
					</el-menu-item-group> -->
				<!-- </el-submenu> -->
				
				<!-- <el-submenu index="2" @click.native="clickIndex(2)">
					<template slot="title">爱车</template>
					<el-menu-item-group>
					  <el-menu-item index="2-1">
						  <router-link to="/Convenience_payment_electricity" replace tag="div">绑定车辆</router-link>
					  </el-menu-item>
					  
					</el-menu-item-group>
				</el-submenu>
				
				<el-submenu index="3" @click.native="clickIndex(3)">
					<template slot="title">我的</template>
					<el-menu-item-group>
					  <el-menu-item index="3-1">
						  <router-link to="/Convenience_payment_naturalgas" replace tag="div">钱包</router-link>
					  </el-menu-item>
					  
					  <el-menu-item index="3-2">
					  	  <router-link to="/Convenience_payment_naturalgas" replace tag="div">我的服务</router-link>
					  </el-menu-item>
					  
					  <el-menu-item index="3-3">
					  	  <router-link to="/Convenience_payment_naturalgas" replace tag="div">常用工具</router-link>
					  </el-menu-item>
					  
					  
					</el-menu-item-group>
				</el-submenu>
				
				
				
			  </el-menu>
		  
	     </el-aside> -->
		 
		 
		 <el-aside width="150px">
		   <el-menu
		     default-active="1"
		     class="el-menu-vertical-demo"
		     @select="handleSelect">
		    <!-- <el-menu-item index="1">
		       <i class="el-icon-user"></i>
		       <span>智慧停车</span>
		     </el-menu-item> -->
			 <div style="height:70px; text-align: center; line-height: 70px;" >
			 <el-link  icon="el-icon-s-promotion" style="font-size:20px;">&nbsp;&nbsp;智慧停车</el-link>
			 </div>
		     
		 
		     <el-menu-item-group>     
				 
		       <el-menu-item index="1" @click.native="clickIndex(1)">
		         <i class="el-icon-guide"></i>
		         <span>首页</span>
		       </el-menu-item>
		       <el-menu-item index="2" @click.native="clickIndex(2)">
		         <i class="el-icon-goods"></i>
		         <span>爱车</span>
		       </el-menu-item>
			   
		       <!-- <el-menu-item index="3" @click.native="clickIndex(3)">
		         <i class="el-icon-tickets"></i>
		         <span>我的</span>
		       </el-menu-item> -->
			   
			   
			   <el-submenu index="3"  @click.native="clickIndex(3)">
			   	<template slot="title"><div  @click="My()">我的</div></template>
			   	<el-menu-item-group>
			   	  <el-menu-item index="3-1">
			   		  <router-link to="/Park_My" replace tag="div">我的</router-link>
			   	  </el-menu-item>
			   	  
			   	 <el-menu-item index="3-2">
			   		  <router-link to="/Park_My_Order" replace tag="div">我的订单</router-link>
			   	  </el-menu-item>
				  
				 <el-menu-item index="3-3">
					  <router-link to="/Park_My_Serve" replace tag="div">我的服务</router-link>
				  </el-menu-item>
				  
				 <el-menu-item index="3-4">
				 	  <router-link to="" replace tag="div">常用工具</router-link>
				  </el-menu-item>
				  
			   	</el-menu-item-group>
			   </el-submenu>
			   
		     </el-menu-item-group>
		 
		   </el-menu>
		 </el-aside>
		 
		 
			
	   <el-container>
	     <!-- 子标题栏 -->
	     <el-header style="height: 45px; background-color: #b3b3b3;text-align: center;line-height: 45px;" >
	       <strong>{{menus[this.titleIndex]}}</strong>
	     </el-header>
	     <br>
	     <!-- 显示内容 -->
	     <el-main style="background-color:antiquewhite;marrgin-top:15px">
	       <router-view></router-view>
	     </el-main>
	   		
	   </el-container>
	  
    </el-container>
	
  </div>
</template>

<script>
export default {
  data(){
    return{
      menus:['','首页','爱车','我的'],
      titleIndex:0 ,//记录点击了哪个菜单
	  
    }
  },
  methods:{
    clickIndex(args){
      this.titleIndex = args
    },
	handleSelect: function(index){
	  // console.log(index);
	  if(index == 1){
	    this.$router.push('/Park_Home')
	  }
	  if(index == 2){
	    this.$router.push('/Park_LoveCar')
	  }
	  if(index == 3){
	    this.$router.push('/Park_My')
	  }
	  
	},
	My(){
		this.$router.push('/Park_My')
	}
	
  }
}
</script>

<style>

</style>